<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优品商城 - 首页</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="header-container">
            <div class="logo">
                <a href="index.html">优品商城</a>
            </div>
            <div class="search">
                <input type="text" id="searchInput" placeholder="请输入商品名称">
                <button id="searchBtn">搜索</button>
            </div>
            <nav class="nav">
                <a href="index.html" class="active">首页</a>
                <a href="profile.html" class="profile">个人中心</a>
                <a href="#" class="orders">我的订单</a>
                <a href="#" class="cart">购物车</a>
                <a href="#" id="loginBtn">登录</a>
                <a href="#" id="registerBtn">注册</a>
                <div class="theme-switch">
                    <button id="themeToggle" class="theme-toggle">
                        <span class="theme-icon">🌙</span>
                    </button>
                    <div class="theme-menu">
                        <div class="theme-option" data-theme="default">默认主题</div>
                        <div class="theme-option" data-theme="dark">暗黑主题</div>
                        <div class="theme-option" data-theme="light">明亮主题</div>
                        <div class="theme-option" data-theme="blue">蓝色主题</div>
                        <div class="theme-option" data-theme="green">绿色主题</div>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <!-- 滚动文字 -->
    <div class="marquee-container">
        <div class="marquee">
            <span>欢迎来到优品商城！</span>
            <span>新品上市，限时特惠！</span>
            <span>全场商品8折起！</span>
            <span>会员专享优惠！</span>
            <span>满300减50，满500减100！</span>
        </div>
    </div>

    <!-- 主要内容区 -->
    <main class="main">
        <!-- 轮播图 -->
        <div class="carousel-container">
            <div class="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=1200&h=400&fit=crop" alt="促销活动1">
                        <div class="carousel-caption">
                            <h3>新品上市</h3>
                            <p>限时特惠，全场8折起</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://images.unsplash.com/photo-1607083206968-13611e3d76db?w=1200&h=400&fit=crop" alt="促销活动2">
                        <div class="carousel-caption">
                            <h3>品质生活</h3>
                            <p>精选好物，品质保证</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="https://images.unsplash.com/photo-1579586337278-3befd40fd17a?w=500&auto=format&fit=crop&q=60" alt="促销活动3">
                        <div class="carousel-caption">
                            <h3>会员专享</h3>
                            <p>会员日特惠，更多优惠等你来</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control prev">&lt;</button>
                <button class="carousel-control next">&gt;</button>
                <div class="carousel-indicators">
                    <span class="indicator active"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                </div>
            </div>
        </div>

        <!-- 限时秒杀 -->
        <div class="seckill-container">
            <div class="seckill-header">
                <div class="seckill-title">
                    <h2>限时秒杀</h2>
                    <div class="countdown">
                        <span class="countdown-label">距结束还剩</span>
                        <span class="countdown-time" id="countdown">02:30:45</span>
                    </div>
                </div>
                <a href="#" class="more-link">更多秒杀 &gt;</a>
            </div>
            <div class="seckill-content">
                <div class="seckill-item">
                    <div class="seckill-item-image">
                        <img src="https://images.unsplash.com/photo-1598327105666-5b89351aff97?w=300&h=300&fit=crop" alt="iPhone 15">
                        <div class="seckill-tag">限时抢购</div>
                    </div>
                    <div class="seckill-item-info">
                        <h3>iPhone 15 Pro</h3>
                        <div class="seckill-price">
                            <span class="current-price">¥6999</span>
                            <span class="original-price">¥7999</span>
                        </div>
                        <div class="seckill-progress">
                            <div class="progress-bar">
                                <div class="progress" style="width: 75%"></div>
                            </div>
                            <span class="progress-text">已抢75%</span>
                        </div>
                        <button class="seckill-buy-btn" data-id="1">立即抢购</button>
                    </div>
                </div>
                <div class="seckill-item">
                    <div class="seckill-item-image">
                        <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?w=300&h=300&fit=crop" alt="MacBook Pro">
                        <div class="seckill-tag">限时抢购</div>
                    </div>
                    <div class="seckill-item-info">
                        <h3>MacBook Pro M3</h3>
                        <div class="seckill-price">
                            <span class="current-price">¥10999</span>
                            <span class="original-price">¥12999</span>
                        </div>
                        <div class="seckill-progress">
                            <div class="progress-bar">
                                <div class="progress" style="width: 60%"></div>
                            </div>
                            <span class="progress-text">已抢60%</span>
                        </div>
                        <button class="seckill-buy-btn" data-id="2">立即抢购</button>
                    </div>
                </div>
                <div class="seckill-item">
                    <div class="seckill-item-image">
                        <img src="https://images.unsplash.com/photo-1600003263720-95b45a4035d5?w=300&h=300&fit=crop" alt="AirPods Pro">
                        <div class="seckill-tag">限时抢购</div>
                    </div>
                    <div class="seckill-item-info">
                        <h3>AirPods Pro 2</h3>
                        <div class="seckill-price">
                            <span class="current-price">¥1499</span>
                            <span class="original-price">¥1999</span>
                        </div>
                        <div class="seckill-progress">
                            <div class="progress-bar">
                                <div class="progress" style="width: 85%"></div>
                            </div>
                            <span class="progress-text">已抢85%</span>
                        </div>
                        <button class="seckill-buy-btn" data-id="3">立即抢购</button>
                    </div>
                </div>
                <div class="seckill-item">
                    <div class="seckill-item-image">
                        <img src="https://images.unsplash.com/photo-1598327105666-5b89351aff97?w=300&h=300&fit=crop" alt="iPad Pro">
                        <div class="seckill-tag">限时抢购</div>
                    </div>
                    <div class="seckill-item-info">
                        <h3>iPad Pro 12.9</h3>
                        <div class="seckill-price">
                            <span class="current-price">¥5999</span>
                            <span class="original-price">¥6999</span>
                        </div>
                        <div class="seckill-progress">
                            <div class="progress-bar">
                                <div class="progress" style="width: 45%"></div>
                            </div>
                            <span class="progress-text">已抢45%</span>
                        </div>
                        <button class="seckill-buy-btn" data-id="4">立即抢购</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分类导航 -->
        <div class="category-nav">
            <ul class="category-list">
                <li><a href="#" data-category="all">全部商品</a></li>
                <li><a href="#" data-category="phone">手机数码</a></li>
                <li><a href="#" data-category="computer">电脑办公</a></li>
                <li><a href="#" data-category="clothing">服装鞋包</a></li>
                <li><a href="#" data-category="food">食品生鲜</a></li>
                <li><a href="#" data-category="home">家居家装</a></li>
            </ul>
        </div>

        <!-- 商品展示区 -->
        <div class="product-container">
            <div class="product-list">
                <!-- 商品将通过JavaScript动态加载 -->
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-links">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">帮助中心</a>
                <a href="#">商家入驻</a>
            </div>
            <div class="copyright">
                © 2024 优品商城 版权所有
            </div>
        </div>
    </footer>

    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>用户登录</h2>
            <form id="loginForm">
                <div class="form-group">
                    <input type="text" id="loginUsername" placeholder="用户名" required>
                </div>
                <div class="form-group">
                    <input type="password" id="loginPassword" placeholder="密码" required>
                </div>
                <button type="submit">登录</button>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>用户注册</h2>
            <form id="registerForm">
                <div class="form-group">
                    <input type="text" id="registerUsername" placeholder="用户名" required>
                </div>
                <div class="form-group">
                    <input type="password" id="registerPassword" placeholder="密码" required>
                </div>
                <div class="form-group">
                    <input type="password" id="confirmPassword" placeholder="确认密码" required>
                </div>
                <button type="submit">注册</button>
            </form>
        </div>
    </div>

    <!-- 购物车侧边栏 -->
    <div id="cartSidebar" class="cart-sidebar">
        <div class="cart-header">
            <h3>我的购物车</h3>
            <button class="close-cart">&times;</button>
        </div>
        <div class="cart-items">
            <!-- 购物车商品将通过JavaScript动态加载 -->
        </div>
        <div class="cart-footer">
            <div class="cart-total">
                <span>总计：</span>
                <span class="total-price">¥0.00</span>
            </div>
            <button class="checkout-btn">去结算</button>
        </div>
    </div>
    <div id="cartOverlay" class="cart-overlay"></div>

    <!-- 订单模态框 -->
    <div id="orderModal" class="modal">
        <div class="modal-content order-modal-content">
            <span class="close">&times;</span>
            <h2>我的订单</h2>
            <div class="order-list">
                <!-- 订单将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>

    <!-- 个人信息模态框 -->
    <div id="profileModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>个人信息</h2>
            <div class="profile-content">
                <div class="profile-info">
                    <div class="info-item">
                        <label>用户名：</label>
                        <span id="profileUsername"></span>
                    </div>
                    <div class="info-item">
                        <label>注册时间：</label>
                        <span id="profileRegisterTime"></span>
                    </div>
                    <div class="info-item">
                        <label>订单数量：</label>
                        <span id="profileOrderCount"></span>
                    </div>
                </div>
                <div class="profile-actions">
                    <button id="changePasswordBtn" class="btn">修改密码</button>
                    <button id="logoutBtn" class="btn danger">退出登录</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改密码模态框 -->
    <div id="changePasswordModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>修改密码</h2>
            <form id="changePasswordForm">
                <div class="form-group">
                    <label for="oldPassword">原密码：</label>
                    <input type="password" id="oldPassword" required>
                </div>
                <div class="form-group">
                    <label for="newPassword">新密码：</label>
                    <input type="password" id="newPassword" required>
                </div>
                <div class="form-group">
                    <label for="confirmNewPassword">确认新密码：</label>
                    <input type="password" id="confirmNewPassword" required>
                </div>
                <button type="submit" class="btn">确认修改</button>
            </form>
        </div>
    </div>

    <!-- 商品详情模态框 -->
    <div id="productDetailModal" class="modal">
        <div class="modal-content product-detail-content">
            <span class="close">&times;</span>
            <div class="product-detail">
                <div class="product-detail-image">
                    <img id="detailProductImage" src="" alt="">
                </div>
                <div class="product-detail-info">
                    <h2 id="detailProductName"></h2>
                    <div class="product-detail-price" id="detailProductPrice"></div>
                    <div class="product-detail-description" id="detailProductDescription"></div>
                    <div class="product-detail-category" id="detailProductCategory"></div>
                    <div class="product-detail-actions">
                        <div class="quantity-selector">
                            <button class="quantity-btn minus">-</button>
                            <input type="number" id="detailQuantity" value="1" min="1">
                            <button class="quantity-btn plus">+</button>
                        </div>
                        <button id="addToCartDetail" class="btn primary">加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 大图预览模态框 -->
    <div id="imagePreviewModal" class="image-preview-modal">
        <img id="previewImage" src="" alt="">
    </div>

    <!-- 秒杀确认弹窗 -->
    <div id="seckillModal" class="seckill-modal">
        <div class="seckill-modal-content">
            <div class="seckill-modal-header">
                <h3 class="seckill-modal-title">确认抢购</h3>
                <span class="seckill-modal-close">&times;</span>
            </div>
            <div class="seckill-modal-body">
                <div class="seckill-modal-info">
                    <img class="seckill-modal-image" src="" alt="">
                    <div class="seckill-modal-details">
                        <h4 class="seckill-modal-name"></h4>
                        <div class="seckill-modal-price"></div>
                        <div class="seckill-modal-quantity">
                            <label>购买数量：</label>
                            <input type="number" min="1" value="1">
                        </div>
                    </div>
                </div>
            </div>
            <div class="seckill-modal-footer">
                <button class="seckill-modal-btn secondary">取消</button>
                <button class="seckill-modal-btn primary">确认抢购</button>
            </div>
        </div>
    </div>

  

    <!-- 在线客服 -->
    <div class="customer-service">
        <button class="cs-button" id="csButton">
            <span class="cs-icon">💬</span>
            <span class="cs-text">在线客服</span>
        </button>
        <div class="cs-chat-box" id="csChatBox">
            <div class="cs-chat-header">
                <h3>在线客服</h3>
                <button class="cs-close">&times;</button>
            </div>
            <div class="cs-chat-messages" id="csMessages">
                <div class="cs-message cs-system">
                    您好！欢迎咨询，请问有什么可以帮您？
                </div>
            </div>
            <div class="cs-chat-input">
                <input type="text" id="csInput" placeholder="请输入您的问题...">
                <button id="csSend">发送</button>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html> 